/*reset*/
a{
	text-decoration:none !important;
	color: black !important;
}
*{
	margin: 0;
	padding: 0;
}

.mainbox {
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-width: 750px;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-repeat-y: repeat;
	z-index: 2;
	display: block;
}
.loading{
	width:100%;
	height: 100%;
}
.first,
.first-box,
.loading-box{
	position:absolute;
	top:0;
	left: 0;
	z-index: 5;
	bottom: 0;
	width:100%;
	height: 100%;
}
.first-box{
	z-index: 6;
}
.mainbox.index .bg{
	width:100%;
}

.dotting{
	width:.3rem;
	height: .3rem;
	background-color: #FFFFFF;
	border-radius: .15rem;
	display: inline-block;
	vertical-align: bottom;
}
.hidden{
	display: none;
}

.first-bg{
	width:100%;
	height: 100%;
}

.box-one{
	width:40%;
	margin: 40% auto 2% auto;
}
.box-one img{
	width:100%;
}

.txt{
	font-size: .8rem;
	text-align: center;
	color: #FFFFFF;
	margin: 1% auto;
}

.loadingDot{
            width: auto;
            margin: 0 auto;
			display: inline-block;
        }
        .loadingDot span{
            display: inline-block;
            width: .3rem;
            height: .3rem;
            margin-right: 5px;
            border-radius: 50%;
            background: #FFFFFF;
            -webkit-animation: load 2.04s ease infinite;
            vertical-align: bottom;
             opacity: 0;
        }
        .loadingDot span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        .loadingDot span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loadingDot span:nth-child(2){
            -webkit-animation-delay:0.56s;
        }
        .loadingDot span:nth-child(3){
            -webkit-animation-delay:0.79s;
        }

.box-two{
	width:35%;
	margin: 10% auto;
	
}
.box-two img{
	width:100%;
}
.first-bg-img{
	width: 100%;
	height: 100%;
}
.logo{
	width:40%;
	margin: 5% 0% 5% 8%;
}

.first-part-one img,
.first-txt img,
.logo img{
	width:100%;
}
.first-txt{
	width:70%;
	margin: 15% auto 2% auto;
}
.first-part-one{
	width:76%;
	margin: 5% auto 5% 16%;
}
.first-btn{
	    width: 2.4rem;
	background-image: url(../images/first_buttom_icon.png);
	background-size: 100% 100%;
	    padding: 4% 8% 6%;
    font-size: .6rem;
        color: #fff;
        margin: 2% auto;
        position: relative;
}
.second-box{
	width:85%;
	margin: 5% auto 1% auto;
	position: relative;
	overflow: hidden;
}
.uploaddone,
.second-box .second-box-content{
    position: absolute;
    top: 1.5%;
    left: 9%;
    z-index: -1;
    width: 80%;
    height: 60%;
    overflow: hidden;
    border-radius: 1rem;
}
.second-box-text{
    width: 66%;
    position: absolute;
    top: 70%;
    left: 15%;
    color: #fff;
    font-size: .5rem;
}
.second-box-main-img{

	width:100%;
}
.second-box .second-box-content img{
	width:100%;
}
.second-btn-row{
	width: 90%;
    position: absolute;
    left: 5%;
    bottom:10%;
}
.fl{
	float: left;
}
.mask{
	position: absolute;
	top:0;
	left: 0;
	bottom:0;
	right: 0;
	width:100%;
	height: 100%;
	background-color: #000000;
	opacity: .8;
	z-index: 15;
	
}
.tip-box img{
	width:100%;
}
.tip-box{
	position: absolute;
    z-index: 16;
    width: 75%;
    top: 0;
    right: 7%;
}
.img-container .btn-row{
	width:100%;
	position: absolute;
	bottom: 0;
	left: 0;
	    z-index: 5;
}
.img-container .btn-row .btn-one{
	width:40%;
	margin: 2% 5%;
	border-radius: .5rem;
	font-size: 1rem;
	float: left;
	text-align: center;
	padding: 1% 0;
}
.img-container .btn-row .btn-one.cancel{
	background-color:#fb4107;
	color:#FFFFFF;
}
.img-container .btn-row .btn-one.comfirm{
	background-color:#f98b0b;
	color:#FFFFFF;
}
#inputImage{
	opacity: 0;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
.upabc{
	width:100%;
}
.star-one{
	position: absolute;
    top: 75%;
    left: 12%;
    z-index: 3;
    width:10%;
}
.star-two{
	position: absolute;
    top: 58%;
    left: 85%;
    z-index: 3;
    width: 12%;
}
.star-three{
	    position: absolute;
    top: 29%;
    left: 86%;
    z-index: 3;
    width: 6%;
}
.star-three img,
.star-two img,
.star-one img{
	width:100%;
}

.moveOne{
-webkit-animation:flashOne 2s .2s ease both infinite;
-moz-animation:flashOne 2s .2s ease both infinite;}
@-webkit-keyframes flashOne{
0%,50%,100%{opacity: 1;}
25%,75%{opacity: 0;}
}
@-moz-keyframes flashOne{
0%,50%,100%{opacity: 1;}
25%,75%{opacity: 0;}
}

.rotateOne{
-webkit-animation:swing 1s .2s linear both infinite;
-moz-animation:swing 1s .2s linear both infinite;}
@-webkit-keyframes swing{
20%,40%,60%,80%,100%{-webkit-transform-origin:center center}
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing{
20%,40%,60%,80%,100%{-moz-transform-origin:center center}
20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
100%{-moz-transform:rotate(0deg)}
}